<template>
  <div class="AgencyDetails">
    <Box v-if="pass">
      <div slot="box" style="display: flex;justify-content: space-between;">
        <div>
          <h2>{{ xq.storageLocation }}</h2>
          <div>
            <div>
              <span>所属区域：{{ xq.region }}</span>
              &emsp;&emsp;&emsp;
              <span>创建时间：{{ xq.createTime }}</span>
              &emsp;&emsp;&emsp;
              <span>创建人：{{ xq.createBy }}</span>
              &emsp;&emsp;&emsp;
              <span>经纬度：</span>
              <span id="sj">{{ xq.longitude }} , {{ xq.latitude }}</span>
              <a href="javascript:;" @click="doCopy">复制</a>
            </div>
          </div>
        </div>
        <div style="display: flex;align-items: center;">
          <div style="margin-right: 20px"><a-button type="primary" @click="diaoyong">一键调用</a-button></div>
        </div>
      </div>
    </Box>
    <Box>
      <div slot="box">
        <a-tabs default-active-key="1" @change="callback">
          <a-tab-pane key="1" tab="物资信息" v-if="pass">
            <CustomTable
              ref="table"
              :showAlert="false"
              :columns="columns"
              :dataSource="list"
              :showSelection="false"
              :showPagination="true"

              rowKey="id"
              :loading="loading"
              @change="onTableChange"
            >
              <template slot="state" slot-scope="text, record">
                <a style="padding: 0 5px" @click="skip(record)">查看</a>
              </template>
            </CustomTable>
<!--            <a-table :columns="columns" :data-source="list">-->

<!--            </a-table>-->
          </a-tab-pane>
          <a-tab-pane key="2" tab="调用记录" force-render>
            <a-collapse accordion>
              <a-collapse-panel
                v-for="(item, index) of Information"
                :key="index"
                :header="
                  '姓名:' +
                    item.information.createBy +
                    '，调用时间:' +
                    item.information.callTime +
                    '，物资用途:' +
                    item.information.materialUse
                "
              >
                <!--                <p>{{item}}</p>-->
                <div style="width: 30%">
                  <a-descriptions :column="2">
                    <a-descriptions-item label="调用人">
                      {{ item.information.createBy }}
                    </a-descriptions-item>
                    <a-descriptions-item label="调用时间">
                      {{ item.information.callTime }}
                    </a-descriptions-item>
                    <a-descriptions-item label="物资用途">
                      {{ item.information.materialUse }}
                    </a-descriptions-item>
                  </a-descriptions>
                </div>
                <div>
                  <a-table :columns="columns1" :data-source="item.transfers">
                    <template slot="footer" slot-scope="currentPageData">
                      <div>{{ computeds(currentPageData) }}</div>
                    </template>
                  </a-table>
                </div>
              </a-collapse-panel>
            </a-collapse>
            <div style="margin:20px 0 0 0 ">
              <a-pagination
                v-if="pass"
                :page-size.sync="pageSize"
                v-model="current"
                :total="total"
                @showSizeChange="onShowSizeChange"
              />
            </div>
          </a-tab-pane>
          <a-tab-pane key="3" tab="审批进度" v-if="!pass">
            <approve :Midata="ListRY.nodeVo"/>
          </a-tab-pane>
        </a-tabs>
      </div>
    </Box>
    <a-modal v-model="visible2" title="物资调用" @ok="handleOk2" width="1000px" centered>
      <!--        <Input ref="input"></Input>-->
      <transfer ref="transfer" :id="id" :storageLocation="xq.storageLocation" @objData="objData"></transfer>
    </a-modal>
  </div>
</template>

<script>
import Box from '@/views/xlgc/Box/index'
import { getDictItemsFromCache } from '@api/api'
import {detailsList, detailsRY, getInformation, topXiangping} from '@api/xlgc/Res'
import CustomTable from '@/components/zxd/Table/CustomTable'
import transfer from './transfer'
import approve from './approve'
export default {
  name: 'AgencyDetails',
  components: { Box, CustomTable, transfer,approve },
  data() {
    return {
      total: 0,
      pageSize: 9,
      current: 1,
      pageFilter1: {
        pageNo: 1,
        pageSize: 10
      },
      sum: 0,
      Information: [],
      id: '',
      visible2: false,
      detailed: {},
      size: 'default',
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '物资名称',
          dataIndex: 'materialName',
          scopedSlots: { customRender: 'materialName' }
        },
        {
          title: '物资品牌',
          dataIndex: 'materialBrand',
          scopedSlots: { customRender: 'materialBrand' }
        },
        {
          title: '单位',
          dataIndex: 'unit',
          scopedSlots: { customRender: 'unit' }
        },
        {
          title: '库存',
          dataIndex: 'stock',
          scopedSlots: { customRender: 'stock' }
        }
      ],
      columns1: [
        {
          title: '序号',
          dataIndex: 'index',

          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '物质名称',
          dataIndex: 'materialName',

          scopedSlots: { customRender: 'materialName' }
        },
        {
          title: '物资品牌',
          dataIndex: 'materialBrand',

          scopedSlots: { customRender: 'materialBrand' }
        },
        {
          title: '单位',
          dataIndex: 'unit',

          scopedSlots: { customRender: 'unit' }
        },
        {
          title: '调用数量',
          dataIndex: 'callsNumber',

          scopedSlots: { customRender: 'callsNumber' }
        }
      ],
      list: [],
      loading: false,
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      xq: {
        storageLocation: '',
        region: '',
        createTime: '',
        createBy: '',
        longitude: '',
        latitude: ''
      },
      pass: true,
      ListRY:{}
    }
  },
  mounted() {
    this.AgencyDetails(this.$route.query)
    this.detailsList(Object.assign({},{id:this.$route.query.id},this.pageFilter))
    this.getInformation(Object.assign({},{id:this.$route.query.id},this.pageFilter1))
    if(this.$route.query.taskId){
      this.pass = false
      this.detailsListRY(this.$route.query.taskId)
    }
  },
  watch: {
    $route(data) {
      this.AgencyDetails(data.query)
      this.detailsList(Object.assign({},{id:this.$route.query.id},this.pageFilter))
      this.getInformation(Object.assign({},{id:this.$route.query.id},this.pageFilter1))
    },
    current: {
      deep: true,
      handler(a, b) {
        this.pageFilter1.pageNo = this.current
        this.getInformation(Object.assign({},{id:this.$route.query.id},this.pageFilter1))
      }
    }
  },
  methods: {
    detailsListRY(val){
      let data = {
        id:val,
        type:'物资调用'
      }
      detailsRY(data).then(ser => {
        // console.log(ser)
        let arr = []
        let obj = {}
        this.ListRY = ser.result
        this.Information.push(Object.assign({}, {information:ser.result.information},{transfers:ser.result.transfers}))
        console.log(this.Information)
      }).catch(err => {
        console.log(err)
      })
    },
    onShowSizeChange(current, pageSize) {
      console.log(current, pageSize)
    },
    doCopy: function(val) {
      let thls = this
      let text = document.querySelector('#sj').innerHTML
      this.$copyText(text).then(
        function(e) {
          thls.$message.success('复制成功', 2)
          console.log(e)
        },
        function(e) {
          console.log(e)
        }
      )
    },
    computeds(val) {
      let sum = 0
      console.log(val)
      for (let item of val) {
        sum = sum + item.callsNumber
      }

      return '合计调用物资：' + sum
    },
    diaoyong() {
      this.visible2 = true
      this.id = this.$route.query.id
      // this.storageLocation = this.$route.query.storageLocation
    },
    objData(val) {
      console.log(val)
      if(val){
        this.visible2 = false
      }
    },
    handleOk2() {
      this.$refs.transfer.planning()
    },
    skip(val) {},
    callback(key) {
      console.log(key)
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.detailsList(Object.assign({},{id:this.$route.query.id},this.pageFilter))
    },
    showModal(val) {
      this.detailed = val
      this.visible = true
    },
    handleOk(e) {
      console.log(e)
      this.visible = false
    },
    AgencyDetails(val) {
      topXiangping(val.id)
        .then(response => {
          // console.log(response)
          if (response.code == 200) {
            this.xq = response.result
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    detailsList(val){
      detailsList(val)
        .then(response => {
          console.log(response)
          this.list = response.result
        })
        .catch(error => {
          console.log(error)
        })
    },
    getInformation(val){
      getInformation(val)
        .then(response => {
          console.log(response)
          this.Information = response.result.records
          this.total = response.result.total
          this.pageFilter1.pageSize = response.result.size
          console.log(this.Information)
        })
        .catch(error => {
          console.log(error)
        })
    },
    filterMultiDictText(dictCode, text) {
      console.log(dictCode, text)
      if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    }
  }
}
</script>

<style scoped>
/deep/.ant-table-footer {
  display: flex;
  justify-content: center;
}
</style>
